<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<style type="text/css">
			body,
			html {
				width: 100%;
				height: 100%;
				margin: 0;
				font-family: "微软雅黑";
			}

			#allmap {
				height: 100%;
				width: 100%;
			}
		</style>
		<!-- 设置地图ak, api key 申请的密钥 -->
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=LolYIDL6a54A2qa4UGq5lAS9oEuDxHPG"></script>
		<script type="text/javascript" src="./CurveLine.js"></script>
		<title>百度地图调用</title>
	</head>
	<body>
		<div id="allmap"></div>
		<div class="content" style="position: absolute; z-index: 1; top: 30px; left: 30px; background: #fff; color: red;">显示隐藏</div>
	</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
	$(function() {
		$(".content").hide()
		// 百度地图API功能
		var map = new BMap.Map("allmap");
		map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
		map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
		var point = new BMap.Point(116.404, 39.915);

		map.centerAndZoom(point, 15); //根据经纬度点定位
		//map.centerAndZoom("山西省太原市",15); //
		getMarker()
		getcurveline()

		function getMarker() {
			const startIcon = new BMap.Icon('./startMarker.png', new BMap.Size(50, 57))
			var StartPoint = new BMap.Point(116.404, 39.915); //点坐标
			var markerStart = new BMap.Marker(StartPoint, {
				icon: startIcon
			}) // 创建标注   
			map.addOverlay(markerStart) // 将标注添加到地图中
			var opts = {
				    width : 200,     // 信息窗口宽度
				    height: 100,     // 信息窗口高度
				    title : "故宫博物院" , // 信息窗口标题
				    message:"这里是故宫"
				}
			var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象 
				markerStart.addEventListener("click", function(){          
					map.openInfoWindow(infoWindow, point); //开启信息窗口
					$(".content").show()
				}); 
			
		}

		function getcurveline() {
			var beijingPosition = new BMap.Point(116.404, 39.915),
				hangzhouPosition = new BMap.Point(116.432045, 39.914429)

			var points = [beijingPosition, hangzhouPosition];
			//创建弧线
			var curve = new BMapLib.CurveLine(points, {
				strokeColor: "blue",
				strokeWeight: 3,
				strokeOpacity: 0.5
			});
			map.addOverlay(curve); //添加到地图中
		};

	})
</script>
